<template>
	<view class="bg_w">
		<topTitle :name="title" right />
		<search @blur="handBlur" @scanCode="handScanCode" />
		<view class="flex f-a-c tab" :class="user.type == 2?'j-s-b':'j-s-a'">
			<view v-for="(item,index) in tab" :key="index" class="f16 nav"
				:class="apiData.list_type == item.key?'color-theme active':'color-6'" @click="handTab(item)">
				{{item.name}}
			</view>
		</view>
		<view class="select flex j-c-f">
			<uni-data-select :localdata="range" :placeholder="`按平台搜索`" class="item" @change="changeSelect" />
			<view class="item flex f-a-c m-lf30" v-if="user.type != 2">
				<view class="date line1" @click="openTime">{{date || '按面单推送时间范围'}}</view>
				<dateTimePicker @onSubmit="bindDateChange" v-if="isShowTime" />
				<uni-icons type="clear" color="#c0c4cc" size="24" @click="clear" v-if="date" />
			</view>
		</view>
		<view class="list bg_f5">
			<list :list="list" @hand="handList" />
		</view>
	</view>
</template>

<script>
	import search from '@/components/search.vue'
	import list from '@/components/list.vue'
	import dateTimePicker from '@/components/dengrq-datetime-picker/dateSelector/index.vue'
	export default {
		components: {
			search,
			list,
			dateTimePicker
		},
		data() {
			return {
				date: '',
				isShowTime: false,
				startDate: '',
				endDate: '',
				mode: 1,
				title: '发货列表',
				user: uni.getStorageSync('userInfo'),
				apiData: {
					list_type: 1 // 仓库端： 1代发货  2已发货  3异常   签收端： 4待签收  5已签收
				},
				page: 1,
				tab: [{
					name: '待发货',
					key: 1
				}, {
					name: '已发货',
					key: 2
				}, {
					name: '异常订单',
					key: 3
				}],
				range: [{ //平台
					text: '虾皮',
					value: 1
				}, {
					text: '虾皮1',
					value: 2
				}, {
					text: '虾皮2',
					value: 3
				}],
				list: [], //列表
				last_page: '' //总页数
			}
		},
		onShow(op) {
			if (this.user.type == 2) {
				this.title = '发货列表'
			} else {
				this.title = '物流签收'
				this.apiData.list_type = 4
				this.tab = [{
					name: '未签收',
					key: 4
				}, {
					name: '已签收',
					key: 5
				}]
			}
			this.platform()
			// this.getList()
		},
		onReachBottom() {
			if (this.page >= this.last_page) {
				this.util.log('到底拉')
				return
			}
			this.page++;
			this.getList();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getList();
		},
		methods: {
			platform() { //平台
				this.util.req(this.api.apiPlatform, {}).then(res => {
					res.list.map(e => {
						Object.assign(e, {
							text: e.name,
							value: e.id
						})
					})
					this.range = res.list;
				})
			},
			clear() {
				this.date = ''
				this.apiData.deliver_time_start = '';
				this.apiData.deliver_time_end = '';
				this.getList()
			},
			openTime() {
				this.isShowTime = true;
			},
			bindDateChange(e) {
				this.isShowTime = false;
				if (e.startDate) {
					this.apiData.deliver_time_start = e.startDate;
					this.apiData.deliver_time_end = e.endDate;
					this.date = `${e.startDate}至${e.endDate}`;
				} else {
					this.date = this.date || '';
					this.apiData.deliver_time_start = this.apiData.deliver_time_start || e.startDate;
					this.apiData.deliver_time_end = this.apiData.deliver_time_end || e.endDate;
				}
				this.getList();
			},
			getList() { //任务列表
				this.util.req(this.api.apiList, this.apiData).then(res => {
					console.log(res, '任务');
					this.list = res.list.data;
					this.last_page = res.list.last_page;
				})
			},
			handList(e) {
				this.util.go(`/pages/index/detail?order=${JSON.stringify(e.e)}&type=${e.type}`)
				// uni.scanCode({
				// 	success: (e) => {
				// 		// if(e.result) {
				// 		// 	this.util.go(`/pages/index/detail?order=${JSON.stringify(e.e)}&type=${e.type}&result=${e.result}`)
				// 		// }else{
				// 		// 	this.util.log('请检查面单信息或联系客服')
				// 		// }
				// 		console.log(e,'扫码是不');
				// 	}
				// })
				// ;
			},
			handBlur(e) { //搜索栏
				this.apiData.platform_order_no = e;
				if(e){
					this.getList();
				}else{
					this.list = []
				}
			},
			handScanCode(e) { //扫码

			},
			handTab(e) {
				this.apiData.list_type = e.key;
				this.getList()
			},
			changeSelect(e) {
				this.apiData.platform = e;
				this.getList()
			}
		}
	}
</script>

<style lang="scss">
	.tab {
		margin: 32rpx 32rpx 10rpx;

		.nav {
			padding-bottom: 29rpx;
			position: relative;
		}

		.nav.active::after {
			content: "";
			width: 62rpx;
			height: 5rpx;
			border-radius: 20rpx;
			background: var(--theme);
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			margin: 0 auto;
		}
	}

	.select {
		margin: 8rpx 32rpx 20rpx 32rpx;

		.item {
			width: 306rpx;
			padding: 16rpx 20rpx;
			border: 2rpx solid #eee;
			border-radius: 60rpx;
			position: relative;
			line-height: 1;
			box-sizing: border-box;

			.platform {
				position: absolute;
				bottom: -80rpx;
				left: 0;
				margin: auto;
				background: #fff;
				border-radius: 0 0 20rpx 20rpx;
				width: 100%;

				.name {
					padding: 32rpx 24rpx 0;
				}
			}
		}
	}

	.list {
		padding-bottom: 40px;
	}
</style>